import styles from "./index.module.scss";
import { useSelector, useDispatch } from "react-redux";
import { setLayers } from "@/store";

export default function PersonInfo() {
  const dispatch = useDispatch();
  const layers = useSelector((state) => {
    return state.layers;
  });
  const openModel = (name) => {
    dispatch(
      setLayers({
        query: {},
        name,
        other: {},
      })
    );
    console.log(layers);
  };
  return (
    <div className={styles.personnel}>
      <div className={styles.leftContent}>
        <div className={styles.item} onClick={() => openModel("model17")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>在职人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model17")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>入职人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model18")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>社保参保人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model19")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>在职实习生人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model20")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>试用期人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model21")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>异常打卡人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model17")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>请假人员</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model17")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>离职人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model22")}>
          <div className={styles.totalVal}>454</div>
          <div className={styles.totalTitle}>意外险参保人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model23")}>
          <div className={styles.totalVal}>4544</div>
          <div className={styles.totalTitle}>人员类型变动</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model17")}>
          <div className={styles.totalVal}>34</div>
          <div className={styles.totalTitle}>应届人数</div>
        </div>
        <div className={styles.item} onClick={() => openModel("model24")}>
          <div className={styles.totalVal}>34</div>
          <div className={styles.totalTitle}>黑名单</div>
        </div>
      </div>
      <div className={styles.rightContent}>
        <div className={styles.imgBox}>
          <span>24.5</span>
          <span className={styles.suffix}>%</span>
        </div>
        <div className={styles.rightTitle}>本地化率</div>
      </div>
    </div>
  );
}
